<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	request.setAttribute("path", path);
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'dogtotal.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="${path}/js/jquery-1.12.3.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap.js"></script>
<link rel="stylesheet" href="${path}/css/bootstrap4.css" />


<style type="text/css">
/* Custom Styles */
body {
	font-family: "微软雅黑";
}

ul.nav-tabs {
	width: 140px;
	margin-top: 120px;
	border-radius: 4px;
	border: 1px solid white;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}

ul.nav-tabs li {
	margin: 0;
	border-top: 1px solid #ddd;
}

ul.nav-tabs li:first-child {
	border-top: none;
}

ul.nav-tabs li a {
	margin: 0;
	padding: 8px 16px;
	border-radius: 0;
}

ul.nav-tabs li.active a,ul.nav-tabs li.active a:hover {
	color: #fff;
	background: black;
	border: 1px solid #0088cc;
}

ul.nav-tabs li:first-child a {
	border-radius: 4px 4px 0 0;
}

ul.nav-tabs li:last-child a {
	border-radius: 0 0 4px 4px;
}

ul.nav-tabs.affix {
	top: 30px;
	/* Set the top position of pinned element */
}

<
style type ="text/css">body {
	font-family: "微软雅黑";
}

.btn-default-change {
	background-color: black !important;
	color: white !important;
}

.a-change {
	color: #FFFFFF !important;
}

.shadow {
	display: none;
}
</style>


<script type="text/javascript">

function Checkb(a){

$("[name='box']:checkbox").prop("checked",a.checked);
setTotal2();
}



</script>


<script type="text/javascript">

$(function(){
setTotal2();
});


function f1(a){
setTotal(a);
setTotal2();
}

function b1(a){
var t=$("input[type='text'][id!='selectName'][id="+a+"]");

if((/^(\+|-)?\d+$/.test(t.val()))&&t.val()>0){

}else{
alert("输入框请为不小于1的正整数！");
t.val(1);
}

setTotal(a);
setTotal2();
}




function j1(a){
var t=$("input[type='text'][id="+a+"]");

if(t.val()>1){
t.val(parseInt(t.val())-1);
}else{

alert("输入框请不小于1");
t.val(1);
}

setTotal(a);
setTotal2();
}

function j2(a){
var t=$("input[type='text'][id="+a+"]");
t.val(parseInt(t.val())+1);
setTotal(a);
setTotal2();
}





function setTotal(a){
var b=a+"price";
var c=a+"price1";
var s=0;
s+=($("input[type='text'][id!='selectName'][id="+a+"]").val())*($("td[id="+b+"]").text());
$("td[id="+c+"]").text(s);

}

function setTotal2(){

var s=0;
var a=$("input[type='checkbox'][name='box'][id!=idAll]:checked");
var b=$(a).parent().parent().find("td[class='text_box']");
$(b).each(function(){
s+=Number($(this).text());

});
$("#span1").text(s);
}

function changePrice(){
setTotal2();
}

</script>


<script type="text/javascript">

function AllDelete(){

var str="";

  $.each($("input[type='checkbox'][id!='idAll'][name='box']"),function(k,val){
 if(val.checked==false){
 return
 }else{
 str+= val.value+",";
}
 });
  if(str==""){
 alert("至少选择一项")
 return
 }
  var ids=str.substring(0,str.length-1);
  var r=confirm("确认删除?")
  if(r==true){
  $.ajax({
   type:"post",
   dataType:"json",
   url:"${path}/dog/deleteCari.html",
   data:{
   "ids":ids
   },
   success:function(data){
   var str="";
   $.each(data,function(k,v){
   str+=v.dname+",";
    window.location.reload();
   }); 
   var str1=str.substring(0,str.length-1);
   alert("成功删除"+str1);
  
   },
   error:function(data){
   alert("删除失败")
   
   }
  
  
  });
  
  
  
  }
   
  
}
</script>

<script type="text/javascript">
function AddYorder(a){
var str="";
var count="";
var names="";
 $.each($("input[type='checkbox'][id!='idAll'][name='box']"),function(k,val){
 if(val.checked==false){
 return
 }else{
 str+= val.value+",";
 name=val.value+"name";
 var b=$("input[type='text'][id="+val.value+"]");
 var  n= $("td[id="+name+"]");
count+=$(b).val()+",";
names+=$(n).text()+",";
 }
 });
  if(str==""){
 alert("至少选择一项")
 return;
 }
  var ids=str.substring(0,str.length-1);
  var counts=count.substring(0,count.length-1);
  var namess=names.substring(0,names.length-1);
  var price=$("#span1").text();
  var r=confirm("确认生成订单?")
  if(r==true){
  var html="";
  $("#t2").empty();
  html+="<thead><tr><th>购买物品id</th><th>物品名字</th><th>数量</th><th>订单总价</th><th>订单地址</th><th>收货人</th><th>订单状态</th></tr></thead>"
  +"<tbody>"
       +"<tr>"
       +"<td id='yorderDid'>"+ids
       +"</td>"
        +"<td id='yorderDname'>"+namess
       +"</td>"
       +"<td id='yorderCount'>"+counts
       +"</td>"
       +"<td id='yorderPrice'>"+price
       +"</td>"
       +"<td><input type='text' id='yaddress' /></td>"
       +"</td>"
       +"<td id='Personname'>"+a
       +"</td>"
       +"<td>未付款"
       +"</td>"
       +"</tr>"
       +"</tbody>"
       
       $(html).appendTo("#t2");
  
  }



}



</script>

<script type="text/javascript">
 function buy(){

var r = confirm("确认购买?")

if(r==true){
if($.trim($("#yaddress").val()).length<=0){
alert("请填写订单地址!")
return
}
$.ajax({
 type:"post",
 dataType:"json",
 url:"${path}/dog/yorderAdd.html",
 data:{
   "dids":$("#yorderDid").text(),
   "yaddress":$("#yaddress").val(),
   "yprice":$("#yorderPrice").text(),
   "count":$("#yorderCount").text(),
   "dstatus":2,
   "username":$("#Personname").text()
 },
 success:function(data){
 alert("购买成功!")
  $("#t2").empty();
  window.location.reload();
 },
 error:function(data){
 
 }



});

}
if(r==false){


$.ajax({
 type:"post",
 dataType:"json",
 url:"${path}/dog/yorderAdd.html",
 data:{
   "dids":$("#yorderDid").text(),
   "yaddress":$("#yaddress").val(),
   "yprice":$("#yorderPrice").text(),
   "count":$("#yorderCount").text(),
   "dstatus":1,
   "username":$("#Personname").text()
 },
 success:function(data){
  $("#t2").empty();
  window.location.reload();
 },
 error:function(data){
 
 }



});
}

} 


</script>

<script type="text/javascript">
         function  g1(){
         var str="";
         $.each($("input[type='checkbox'][name='fox'][id!='idAbove']"),function(k,v){
         if(v.checked==false){
         return
         }else{
         str+=v.value+",";
         }
         });
         if(str==""){
         alert("至少选择一项");
         return
         } 
      var yids=str.substring(0,str.length-1); 
      var r =confirm("确认取消订单?");
      if(r==true){
      $.ajax({
      type:"post",
      dataType:"json",
      url:"${path}/dog/DeleteAll.html",
      data:{
       "yids":yids
      },
      success:function(data){
      window.location.reload();
      },
      error:function(data){
      
      
      }
      
      
      });
      
      }
         }


       function  z1(a){
              $("input[type='checkbox'][name='fox']").prop("checked",a.checked);
             
             }
</script>

<script type="text/javascript">
         function z2(){
          var str="";
         $.each($("input[type='checkbox'][name='fox'][id!='idAbove']"),function(k,v){
         if(v.checked==false){
         return
         }else{
         str+=v.value+",";
         }
         });
         if(str==""){
         alert("至少选择一项");
         return
         } 
         if($.trim($("#yaddressAll").val()).length<=0){
         alert("请填写订单地址!");
         return
         }
      var yids=str.substring(0,str.length-1); 
        var r=confirm("确认继续支付？")         
         if(r==true){
             $.ajax({
      type:"post",
      dataType:"json",
      url:"${path}/dog/ChangeStatus.html",
      data:{
       "yids":yids,
       "yaddress":$("#yaddressAll").val()
      },
      success:function(data){
      alert("完成支付！")
      window.location.reload();
      },
      error:function(data){
      
      
      }
      
      
      });
            
            
            }      
                 }
     

</script>

<script>
		
			$(document).ready(function() {
				$(".carousel").carousel({
					interval : 2000
				})
			})
			$(function() {
				if ($("#w3").text() == "admin") {
				    $("#ll").show();
					$("#w4").show();
					$("#w5").show();
					$("#w3").show();
					$("#w1").hide();
					$("#w2").hide();
				} else if ($("#w3").text() == "") {
					
				} else {
				    $("#ll").show();
					$("#w3").show();
					$("#w1").hide();
					$("#w2").hide();
				}
			});
		</script>

<script type="text/javascript">
function giveup(){

$("#t2").empty();
}
</script>
<script>

	function cleanSession() {
		window.location.href = "${path}/dog/cleanSession.html";
	}
</script>



<script type="text/javascript">
function SelectAbove(a,b){
if($.trim(a).length<=0){
alert("请登录!");
window.location.href="${path}/page/dog/dog.jsp";
}else{
window.location.href="${path}/dog/SelectCari.html?username="+encodeURI(encodeURI(a))+"#section-"+b;
}


}

</script>

</script>
</head>

<body data-spy="scroll" data-target="#myScrollspy">

	<div>
		<nav class="navbar navbar-inverse navbar-fixed-top"
			style="height: 86px;">
			<div class="container">
				<div class="row">
					<div class="navbar-header">
						<span class="navbar-brand"><a
							href="${path}/page/dog/dog.jsp"><img
								src="${path}/picture/dog.jpg" width="70px" height="60px">
						</a>
						</span>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-left"
							style="font-size: 20px;margin-top: 20px;margin-left: 70px;">
							<li class="dropdown"><a data-toggle="dropdown"
								class="dropdown-toggle ">&nbsp;&nbsp;&nbsp;购买地点&nbsp;&nbsp;&nbsp;<span
									class="caret" style="width: 10px;height: 4px;"></span>
							</a>
								<ul class="dropdown-menu">
									<li><a>3</a>
									</li>
									<li><a>2</a>
									</li>
									<li><a>1</a>
									</li>
								</ul></li>

						</ul>
					</div>
					<div>
						<ul id="w4" class="nav navbar-nav navbar-left shadow"
							style="font-size: 20px;margin-top: 20px;">
							<li><a>|</a>
							</li>
						</ul>
					</div>
					<div>
						<ul id="w5" class="nav navbar-nav navbar-left shadow"
							style="font-size: 20px;margin-top: 20px;">
							<li><a href="${path}/doglist.jsp">狗狗管理</a>
							</li>
						</ul>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-left"
							style="font-size: 20px;margin-top: 20px;">
							<li><a>|</a>
							</li>
						</ul>
					</div>
					<div>
						<ul class="nav navbar-nav navbar-left"
							style="font-size: 20px;margin-top: 20px;">
							<li><a href="${path}/dog/selectDog.html?pageNo=1">狗狗购买</a>
							</li>
						</ul>
					</div>
					<div>
						<form class="navbar-form navbar-right" style="margin-top: 28px;">
							<div class="form-group">
								<div class="input-group">
									<!-- <input type="text" id="selectName" class="form-control"
										placeholder="查询狗狗名字...." /> <span class="input-group-addon"><a
										onclick="" class="glyphicon glyphicon-search a-change"></a>
									</span> -->
								</div>


								<div class="btn-group dropdown">
									<!-- 	<button id="w1" type="button" class="btn btn-default-change" data-toggle="modal" data-target="#mymodal"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Sign in</button>
				<button id="w2" type="button" class="btn btn-default-change" data-toggle="modal" data-target="#mymodal2">Register</button> -->


									<span><strong style="font-size:20px;color: white;">Welcome:&nbsp;&nbsp;</strong></span><a id="w3"
										style="margin-left: 25px;margin-right: 25px;color: white;font-size:20px;"
										class="dropdown-toggle shadow" data-toggle="dropdown">${username}<span
										class="caret shadow" id="s1"></span>
									</a>

									<ul class="dropdown-menu nav-right-change">
										<li class="shadow" id="ll"><a onclick="cleanSession()"><span
												class="glyphicon glyphicon-log-out"></span>&nbsp;logout</a>
										</li>
									</ul>
								</div>

							</div>
						</form>

					</div>
				</div>
			</div>
		</nav>
	</div>

	<div class="container">

		<div class="row" style="margin-top: 200px;">
			<div class="col-xs-2" id="myScrollspy">
				<ul class="nav nav-tabs nav-stacked" data-spy="affix"
					data-offset-top="125">
					<li class="active"><a
						onclick="SelectAbove('${username}',1)" >我的订单</a>
					</li>
					<li><a onclick="SelectAbove('${username}',2)">购物车</a>
					</li>
					<li><a onclick="SelectAbove('${username}',3)">代付款</a>
					</li>
					<li><a onclick="SelectAbove('${username}',4)">已付款</a>
					</li>
				</ul>
			</div>
			<div class="col-xs-10">
				<div>
					<h2 id="section-1" class="h2-change"
						style="margin-bottom: 20px;text-align: center;">我的订单</h2>

					<div style="margin-bottom: 50px;text-align: center;">
						<button class="btn btn-default" style="margin-top: 20px;"
							onclick="giveup()">放弃订单</button>
						<button class="btn btn-default"
							style="margin-top: 20px;margin-left: 10px;" onclick="buy()">确认购买</button>
					</div>
					<table class="table table-condensed" id="t2">
						<thead>
							<tr>

								<th>购买物品id</th>
								<th>物品名字</th>
								<th>数量</th>
								<th>订单总价</th>
								<th>订单地址</th>
								<th>收货人</th>
								<th>订单状态</th>
							</tr>
						</thead>
						<!-- <tbody>
								<tr>
									
									<td>11</td>
									<td>11</td>
									<td>12000.00</td>
									<td>
									<input type="text" />
									</td>
									<td>陈昊天</td>
								</tr>
							</tbody> -->
					</table>

				</div>
				<hr>
				<div>

					<h2 id="section-2" class="h2-change"
						style="margin-top: 300px;margin-bottom: 50px;text-align: center;">购物车</h2>
					<div style="margin-bottom: 50px;text-align: center;">
						<button class="btn btn-default" style="margin-top: 40px;"
							onclick="AllDelete()">全部删除</button>
						<button class="btn btn-default"
							style="margin-top: 40px;margin-left: 10px;"
							onclick="AddYorder('${username}')">生成订单</button>
					</div>
					<table class="table table-condensed " style="text-align: center;">
						<thead>
							<th style="text-align: center;"><input type="checkbox"
								id="idAll" onclick="Checkb(this)" name="box" /></th>
							<th style="text-align: center;">图片</th>
							<th style="text-align: center;">名字</th>
							<th style="text-align: center;">单价</th>
							<th style="text-align: center;">数量</th>
							<th style="text-align: center;">总价</th>
						</thead>
						<c:forEach var="dog" items="${list}">
							<tbody>
								<tr>
									<td><input name="box" type="checkbox" value="${dog.did}"
										onclick="changePrice()" /></td>
									<td><img src="${path}/dog/show.html?img=${dog.dimg}"
										style="width: 60px;height: 60px;" /></td>
									<td id="${dog.did}${'name'}">${dog.dname}</td>
									<td id="${dog.did}${'price'}">${dog.dprice}</td>
									<td><a onclick="j1('${dog.did}')">-</a> <input
										id="${dog.did}" type="text" value="1"
										style="width:30px;text-align:center" onblur="b1('${dog.did}')"
										onfocus="f1('${dog.did}')" /> <a onclick="j2('${dog.did}')">+</a>
									</td>
									<td id="${dog.did}${'price1'}" class="text_box">${dog.dprice}</td>
								</tr>
							</tbody>
						</c:forEach>
					</table>

					<h2 style="margin-top: 60px;">
						合计：<span id="span1"></span>
					</h2>

				</div>

				<hr>
				<div>
					<h2 id="section-3" class="h2-change"
						style="margin-top: 400px;text-align: center;">代付款</h2>
					<div style="margin-bottom: 50px;text-align: center;">
						<button class="btn btn-default" style="margin-top: 40px;"  onclick="g1()">取消订单</button>
						<button class="btn btn-default"
							style="margin-top: 40px;margin-left: 10px;" onclick="z2()">继续支付</button>
					</div>
					<table class="table table-condensed " style="text-align: center;">
					
						<thead>
							<th style="text-align: center;"><input type="checkbox"   id="idAbove" name="fox" onclick="z1(this)"/></th>
							<th style="text-align: center;">收货人</th>
							<th style="text-align: center;">订单ID</th>
							<th style="text-align: center;">订单总价</th>
							<th style="text-align: center;">订单物品</th>
							<th style="text-align: center;">物品数量</th>
						</thead>
						
							<c:forEach var="dog" items="${allList}" varStatus="loop" >
							<tbody>
								<tr>
									<td><input type="checkbox" name="fox"  value="${yorderList[loop.count-1].yid}"/>
									</td>
									<td>${username}</td>
									<td>${yorderList[loop.count-1].yid}</td>
									<td>${yorderList[loop.count-1].yprice}</td>
									<td>${dog.dname}</td>
									<td>${dog.count}</td>
								</tr>
								
							</tbody>
							
						</c:forEach>
					</table>
					<h4 style="margin-top: 60px;">
					<strong><span>地址:<input type="text" id="yaddressAll"/></span></strong>
					</h4>
				</div>
				<hr>
				<div>
					<h2 id="section-4" class="h2-change" style="margin-top: 600px;text-align: center;">已付款</h2>
					<table class="table table-condensed " style="text-align: center;">
						<thead>
							<th style="text-align: center;">收货人</th>
							<th style="text-align: center;">订单ID</th>
							<th style="text-align: center;">发送地址</th>
							<th style="text-align: center;">订单总价</th>
							<th style="text-align: center;">订单物品</th>
							<th style="text-align: center;">物品数量</th>
						</thead>
						<c:forEach var="dog" items="${allListt}" varStatus="loopt" >
						
							<tbody>
								<tr>
									<td>${username}</td>
									<td>${yorderListt[loopt.count-1].yid}</td>
									<td>${yorderListt[loopt.count-1].yaddress}</td>
									<td>${yorderListt[loopt.count-1].yprice}</td>
									<td>${dog.dname}</td>
									<td>${dog.count}</td>
								</tr>
								
							</tbody>
							
						</c:forEach>
					</table>
				</div>
			</div>
		</div>
	</div>

</body>
</html>
